<template>
	<up-navbar
	            title="我的足迹"
	            :autoBack="true"
				bg-color="#00757f"
				title-color="white" 
				left-icon-color="white"
	        >
	        </up-navbar>
	<view class="Frame">
	<view class="one">
		<view class="text">
			我参与的讨论/项目
		</view>
		<view class="arrow">
			<image src="/static/svg/arrow02.svg" mode="" style="width: 20px;height: 20px;"></image>
	</view>
	</view>
	<view class="two">
		<view class="text">
			户外活动与探索
		</view>
		<view class="arrow">
			<image src="/static/svg/arrow02.svg" mode="" style="width: 20px;height: 20px;"></image>
		</view>
	</view>
	<view class="three">
		<view class="text">
			我参与的赛事
		</view>
		<view class="arrow">
			<image src="/static/svg/arrow02.svg" mode="" style="width: 20px;height: 20px;"></image>
		</view>
	</view>
	<view class="four">
		<view class="text">
			我浏览过的活动/赛事
		</view>
		<view class="arrow">
			<image src="/static/svg/arrow02.svg" mode="" style="width: 20px;height: 20px;"></image>
		</view>
	</view>

	<view class="five">
		<view class="text">
			我参与的活动
		</view>
		<view class="arrow">
			<image src="/static/svg/arrow02.svg" mode="" style="width: 20px;height: 20px;"></image>
		</view>
	</view>
	</view>
</template>

<script setup>
	
</script>

<style>
	.Frame {
		height: 100vh;
		width: 100%;
		background-color: whitesmoke;
		border: 1px solid whitesmoke;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-top: 20px;
		box-sizing: border-box;
		margin-top: 17%;
	}

	.one, .two, .three, .four, .five {
		width: 80%;
		height: 14%;
		margin: 10px 0;
		border-radius: 16px;
		box-shadow: 5px 5px 7px rgba(128, 128, 128, 0.9);
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 20px;
		box-sizing: border-box;
	}

	.one {
		background-color: #BD3124;
	}

	.two {
		background-color: #4095E5;
	}

	.three {
		background-color: #81B337;
	}

	.four {
		background-color: #E99D42;
	}

	.five {
		background-color: #54BCBD;
	}

	.text {
		color: white;
		font-size: 116%;
		font-weight: 950;
	}

	.arrow{
		display: flex;
		align-items: center;
	}
</style>
